<!--页面 -->
<template>
	<div class="contact">
		<toplogo @logomsg="logomsg"></toplogo>
		<div class="logoactive">
			<div class="logoactive-logo">
				<img class="logoimage" :src="formdata.logourl" alt="" />
			</div>
		</div>
		<div class="from">
			<div class="from-each">
				<div class="from-eachtitle">Account</div>
				<div class="from-eachinput">
					<el-input style="height:50px;" v-model="formdata.account"
						placeholder="Please Enter An Account"></el-input>
				</div>
			</div>
			<div class="from-each">
				<div class="from-eachtitle">Password</div>
				<div class="from-eachinput">
					<el-input type="password" style="height:50px;" v-model="formdata.password"
						placeholder="Please Enter The Password"></el-input>
				</div>
			</div>
		</div>
		<div class="btneach" style="margin-top: 70px;" v-if="isreg">
			<el-button class="btneachbtn mainbg" type="primary" @click="begin">Begin</el-button>
		</div>
		<!-- v-if="!isreg" -->
		<div class="btneach" style="margin-top:20px;" >
			<!-- @click="registerfun" -->
			<el-button class="btneachbtn" style="background-color:#D4D4D4;">Cancel</el-button>
		</div>
		<!-- <div class="btneach" v-if="isreg" @click="isreg=false">
			<el-button class="btneachbtn" style="background-color:#D4D4D4;">register</el-button>
		</div> -->
		<!-- <div class="btneach" v-if="!isreg" @click="isreg = !isreg">
			<el-button class="btneachbtn" style="background-color:#D4D4D4;">Cancel</el-button>
		</div> -->

	</div>
</template>

<script setup>
	import toplogo from '@/compontents/toplogo.vue'
	import {
		loginmodel
	} from '@/api/services/api'
	import {
		ElMessage,
		ElLoading,
		ElNotification
	} from 'element-plus'
	const store = useStore();
	const router = useRouter();

	let isreg = true;
	let LoadingInstance = null;
	// 登录注册数据
	const formdata = reactive({
		account: '',
		password: '',
		scene:1,
		logourl:''
	});
	const logomsg = (value) => {
		formdata.logourl = value
	};
	const begin = async () => { // 登录
		// router.push('/home/home')
		// return false;
		if (formdata.account == '' || formdata.password == '') {
			ElNotification({
				message: 'Input error',
				showClose: false,
				icon: 'Platform',
				customClass: 'notion_customClass',
				duration: 1000
			})
			return false
		};
		let regexp = /^[A-Za-z0-9]{6,12}$/;
		let boolean_value = regexp.test(formdata.account);
		if (!boolean_value) {
			ElNotification({
				message: 'Input error',
				showClose: false,
				icon: 'Platform',
				customClass: 'notion_customClass',
				duration: 1000
			})
			return false
		};
		LoadingInstance = ElLoading.service({
			lock: true,
			text: 'Loading',
			background: 'rgba(0, 0, 0, 0.7)'
		});
		await loginmodel.login(formdata).then((result) => {
			// console.log(result)
			LoadingInstance.close()
			if (result.code == 1) {
				store.setToken(result.data);
				router.push('/')
			} else {
				ElNotification({
					message: result.msg,
					showClose: false,
					icon: 'Platform',
					customClass: 'notion_customClass',
					duration: 1000
				})
			}
		})
		.catch((err) => {
			LoadingInstance.close()
		})
	};
	const registerfun = async () => {
		if (formdata.account == '' || formdata.password == '') {
			ElNotification({
				message: 'Input error',
				showClose: false,
				icon: 'Platform',
				customClass: 'notion_customClass',
				duration: 1000
			})
			return false
		};
		let regexp = /^[A-Za-z0-9]{6,12}$/;
		let boolean_value = regexp.test(formdata.account);
		if (!boolean_value) {
			ElNotification({
				message: 'Input error',
				showClose: false,
				icon: 'Platform',
				customClass: 'notion_customClass',
				duration: 1000
			})
			return false
		};
		LoadingInstance = ElLoading.service({
			lock: true,
			text: 'Loading',
			background: 'rgba(0, 0, 0, 0.7)'
		});
		// await loginmodel.login(formdata).then((result) => {
		// 	console.log(result)
		// 	LoadingInstance.close()
		// 	if (result.code == 1) {
		// 		store.setToken(result.data)
		// 		router.push('/home/home')
		// 	} else {
		// 		ElNotification({
		// 			message: result.msg,
		// 			showClose: false,
		// 			icon: 'Platform',
		// 			customClass: 'notion_customClass',
		// 			duration: 1000
		// 		})
		// 	}
		// }).catch((err) => {
		// 	LoadingInstance.close()
		// })
	};
</script>

<style scoped lang="less">
	.contact {
		max-width: 1020px;
		margin: auto;
	}

	.logoactive {
		padding: 58px 0 48px;

		.logoactive-logo {
			width: 157px;
			height: 157px;
			margin: auto;
			text-align: center;
			img {
				margin: auto;
				height:157px;
			}
		}
	}

	.from-each {
		width: 90%;
		margin: 0 auto 34px;

		.from-eachtitle {
			font-size: 18px;
			color: #333333;
			font-weight: 700;
			line-height: 50px;
		}

		.from-eachinput {
			height: 50px;
			line-height: 50px;
			color: #333;
			font-size: 16px;
			background-color: #fff;
		}
	}

	.btneach {
		width: 290px;
		margin: auto;
		margin-bottom: 23px;

		.btneachbtn {
			width: 290px;
			height: 45px;
		}
	}

	.notion_customClass {
		background-color: #2F75FF !important;
		border: none !important;
		color: #ffffff !important;
	}

	.el-notification__content {
		color: #ffffff !important;
	}
</style>